<template>
    <div>
        <el-dialog title="修改会员信息" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="memberForm" :rules="rules" ref="dialogRef">
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="memberForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model="memberForm.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="memberForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="edit">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions } from 'vuex';
import { memberInfo,memberEdit } from '../../request/api';
export default {
    props: ['isShow'],
    data() {
        return {
            memberForm: {
                uid: '',//会员编号，必填项
                nickname: '',//昵称
                phone: '',//手机号
                password: '',//密码
                status: '',//状态1正常2禁用
            },
            formLabelWidth: '120px',
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
                ],

            }
        }
    },
    methods: {
        ...mapActions({
            memberList:'member/getMemberListAction'
        }),
        // 点击修改 
        edit() {
            memberEdit(this.memberForm).then(res=>{
                if(res.code==200){
                    // 修改成功
                    this.$message.success(res.msg);
                    // 关闭弹窗
                    this.cancel();
                    // 重新渲染视图
                    this.memberList();
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
        // 点击取消
        cancel() {
            // 关闭弹窗
            this.$emit('cancel');
            // 清空表单内容
            this.reset();
            // 清空规则验证
            this.resetForm();
        },
        // 清空表单内容
        reset() {
            this.memberForm = {
                uid: '',//会员编号，必填项
                nickname: '',//昵称
                phone: '',//手机号
                password: '',//密码
                status: '',//状态1正常2禁用
            }
        },
        // 清空表单验证
        resetForm() {
            this.$refs.dialogRef.resetFields();
        },
        // 数据回显
        lookup(uid) {
            console.log(uid, '回显');
            memberInfo({ uid }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // 获取成功
                    this.$message.success(res.msg);
                    // 数据回显
                    this.memberForm = res.list;
                    // console.log(this.memberForm);
                    // 密码置空 如果不更改密码 无序输入密码
                    this.memberForm.password = '';
                } else {
                    // 获取失败
                    this.$message.error(res.msg);
                }
            })
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {},
}
</script>
<style scoped></style>